<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - ShopEase电商平台</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563EB', // 更现代的蓝色
                        secondary: '#F97316', // 柔和的橙色
                        success: '#10B981',
                        neutral: {
                            50: '#F8FAFC',
                            100: '#F1F5F9',
                            200: '#E2E8F0',
                            300: '#CBD5E1',
                            400: '#94A3B8',
                            500: '#64748B',
                            600: '#475569',
                            700: '#334155',
                            800: '#1E293B',
                            900: '#0F172A',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'elevation-1': '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
                        'elevation-2': '0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)',
                        'elevation-3': '0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)',
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-balance {
        text-wrap: balance;
      }
      .bg-glass {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
      }
      .input-field {
        @apply w-full px-4 py-3 rounded-lg bg-neutral-50 border border-neutral-200 text-neutral-800 placeholder-neutral-400 transition-all duration-200 focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
      }
      .btn-primary {
        @apply w-full py-3 px-6 bg-primary text-white font-medium rounded-lg transition-all duration-300 hover:bg-primary/90 hover:shadow-elevation-2 hover:-translate-y-0.5 active:translate-y-0;
      }
      .social-btn {
        @apply flex items-center justify-center h-12 rounded-lg border border-neutral-200 transition-all duration-300 hover:border-transparent hover:shadow-elevation-1;
      }
    }
  </style>
</head>

<body class="font-inter bg-gradient-to-br from-neutral-50 to-blue-50 min-h-screen flex flex-col">
    <!-- 顶部通知栏 -->
    <div class="bg-primary text-white text-center py-2 text-sm">
        <p>🎉 新用户注册即送50元优惠券 | 全场满199元免运费</p>
    </div>

    <!-- 导航栏 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 md:px-6">
            <div class="flex items-center justify-between py-4">
                <a href="#" class="flex items-center space-x-2">
                    <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                        <i class="fa fa-shopping-bag text-white text-xl"></i>
                    </div>
                    <span class="text-xl font-bold text-neutral-800">ShopEase</span>
                </a>

                <div class="hidden md:flex items-center space-x-6">
                    <a href="#" class="text-neutral-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-shopping-cart mr-1.5"></i> 购物车
                    </a>
                    <a href="#" class="text-neutral-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-heart-o mr-1.5"></i> 收藏夹
                    </a>
                </div>

                <button class="md:hidden text-neutral-700">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow flex items-center justify-center px-4 py-8 md:py-16">
        <div class="container mx-auto max-w-6xl w-full">
            <div class="bg-white rounded-2xl shadow-elevation-3 overflow-hidden flex flex-col lg:flex-row">
                <!-- 左侧品牌区域 -->
                <div
                    class="lg:w-5/12 bg-gradient-to-br from-primary to-blue-700 p-8 md:p-12 lg:p-16 text-white flex flex-col">
                    <div class="mb-10">
                        <div class="flex items-center space-x-2 mb-8">
                            <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center">
                                <i class="fa fa-shopping-bag text-white text-xl"></i>
                            </div>
                            <h1 class="text-2xl font-bold">ShopEase</h1>
                        </div>

                        <h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold leading-tight mb-4">开启您的<br>智能购物之旅</h2>
                        <p class="text-blue-100 text-balance mb-8 max-w-md">加入我们，享受个性化推荐、专属优惠和便捷的购物体验</p>
                    </div>

                    <!-- 品牌优势 -->
                    <div class="space-y-6 mb-auto">
                        <div class="flex items-start">
                            <div
                                class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-gift text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">新人专享福利</h3>
                                <p class="text-blue-100 text-sm">注册即送50元无门槛优惠券，首单立减</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div
                                class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-lock text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">安全支付保障</h3>
                                <p class="text-blue-100 text-sm">银行级加密技术，保障您的资金安全</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div
                                class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-truck text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">快速配送服务</h3>
                                <p class="text-blue-100 text-sm">全国200+城市支持次日达，最快3小时送达</p>
                            </div>
                        </div>
                    </div>

                    <!-- 装饰图形 -->
                    <div class="relative mt-12 -mb-6 -mr-6 self-end">
                        <div class="w-40 h-40 bg-white/5 rounded-full"></div>
                        <div class="w-24 h-24 bg-white/10 rounded-full absolute top-8 right-8"></div>
                    </div>
                </div>

                <!-- 右侧表单区域 -->
                <div class="lg:w-7/12 p-8 md:p-10 lg:p-12">
                    <div class="max-w-md mx-auto w-full">
                        <div class="text-center mb-8">
                            <h2 class="text-2xl md:text-3xl font-bold text-neutral-800 mb-2">创建您的账户</h2>
                            <p class="text-neutral-500">填写以下信息，开始享受购物乐趣</p>
                        </div>

                        <form class="space-y-5">
                            <!-- 姓名输入 -->
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                <div>
                                    <label for="firstName"
                                        class="block text-sm font-medium text-neutral-700 mb-1.5">姓氏</label>
                                    <input type="text" id="firstName" class="input-field" placeholder="请输入姓氏" required>
                                </div>
                                <div>
                                    <label for="lastName"
                                        class="block text-sm font-medium text-neutral-700 mb-1.5">名字</label>
                                    <input type="text" id="lastName" class="input-field" placeholder="请输入名字" required>
                                </div>
                            </div>

                            <!-- 邮箱输入 -->
                            <div>
                                <label for="email"
                                    class="block text-sm font-medium text-neutral-700 mb-1.5">电子邮箱</label>
                                <div class="relative">
                                    <input type="email" id="email" class="input-field pl-10"
                                        placeholder="your@email.com" required>
                                    <div class="absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400">
                                        <i class="fa fa-envelope-o"></i>
                                    </div>
                                </div>
                            </div>

                            <!-- 手机输入 -->
                            <div>
                                <label for="phone"
                                    class="block text-sm font-medium text-neutral-700 mb-1.5">手机号码</label>
                                <div class="relative">
                                    <input type="tel" id="phone" class="input-field pl-10" placeholder="请输入手机号码"
                                        required>
                                    <div class="absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400">
                                        <i class="fa fa-phone"></i>
                                    </div>
                                </div>
                            </div>

                            <!-- 密码输入 -->
                            <div>
                                <div class="flex items-center justify-between mb-1.5">
                                    <label for="password"
                                        class="block text-sm font-medium text-neutral-700">设置密码</label>
                                    <span class="text-xs text-neutral-500">至少8个字符</span>
                                </div>
                                <div class="relative">
                                    <input type="password" id="password" class="input-field pl-10 pr-10"
                                        placeholder="请设置密码" required>
                                    <div class="absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400">
                                        <i class="fa fa-lock"></i>
                                    </div>
                                    <button type="button"
                                        class="absolute right-3.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-700 transition-colors toggle-password">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                </div>
                                <!-- 密码强度指示器 -->
                                <div class="mt-2">
                                    <div class="flex items-center justify-between text-xs mb-1">
                                        <span class="text-neutral-500">密码强度</span>
                                        <span class="font-medium text-neutral-700" id="password-strength">弱</span>
                                    </div>
                                    <div class="h-1.5 w-full bg-neutral-100 rounded-full overflow-hidden">
                                        <div class="h-full bg-red-400 rounded-full transition-all duration-300"
                                            id="strength-indicator" style="width: 25%"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- 确认密码 -->
                            <div>
                                <label for="confirmPassword"
                                    class="block text-sm font-medium text-neutral-700 mb-1.5">确认密码</label>
                                <div class="relative">
                                    <input type="password" id="confirmPassword" class="input-field pl-10 pr-10"
                                        placeholder="请再次输入密码" required>
                                    <div class="absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400">
                                        <i class="fa fa-lock"></i>
                                    </div>
                                    <button type="button"
                                        class="absolute right-3.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-700 transition-colors toggle-password">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                </div>
                                <p class="mt-1.5 text-xs text-neutral-500" id="password-match-message"></p>
                            </div>

                            <!-- 同意条款 -->
                            <div class="flex items-start pt-1">
                                <div class="flex items-center h-5">
                                    <input id="terms" type="checkbox"
                                        class="w-4 h-4 rounded border-neutral-300 bg-neutral-50 text-primary focus:ring-primary/30"
                                        required>
                                </div>
                                <label for="terms" class="ml-2 text-sm text-neutral-600">
                                    我已阅读并同意 <a href="#" class="text-primary hover:underline">用户协议</a> 和 <a href="#"
                                        class="text-primary hover:underline">隐私政策</a>
                                </label>
                            </div>

                            <!-- 注册按钮 -->
                            <button type="submit" class="btn-primary mt-2 flex items-center justify-center">
                                <i class="fa fa-user-plus mr-2"></i> 完成注册
                            </button>

                            <!-- 已有账户 -->
                            <div class="text-center text-neutral-600 text-sm">
                                已有账户？ <a href="login.html" class="text-primary font-medium hover:underline">立即登录</a>
                            </div>
                        </form>

                        <!-- 社交登录 -->
                        <div class="mt-8">
                            <div class="relative flex items-center">
                                <div class="flex-grow border-t border-neutral-200"></div>
                                <span class="flex-shrink mx-4 text-sm text-neutral-500">或使用以下方式注册</span>
                                <div class="flex-grow border-t border-neutral-200"></div>
                            </div>

                            <div class="grid grid-cols-4 gap-3 mt-5">
                                <a href="#" class="social-btn text-[#07C160] hover:bg-[#07C160]/5">
                                    <i class="fa fa-weixin text-xl"></i>
                                </a>
                                <a href="#" class="social-btn text-[#1DA1F2] hover:bg-[#1DA1F2]/5">
                                    <i class="fa fa-qq text-xl"></i>
                                </a>
                                <a href="#" class="social-btn text-[#E6162D] hover:bg-[#E6162D]/5">
                                    <i class="fa fa-weibo text-xl"></i>
                                </a>
                                <a href="#" class="social-btn text-[#EA4335] hover:bg-[#EA4335]/5">
                                    <i class="fa fa-google text-xl"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-neutral-200 py-6">
        <div class="container mx-auto px-4 md:px-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p class="text-neutral-500 text-sm mb-4 md:mb-0">© 2023 ShopEase. 保留所有权利</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">隐私政策</a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">服务条款</a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">帮助中心</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 密码显示/隐藏切换
        document.querySelectorAll('.toggle-password').forEach(button => {
            button.addEventListener('click', function () {
                const input = this.parentElement.querySelector('input');
                const icon = this.querySelector('i');

                if (input.type === 'password') {
                    input.type = 'text';
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                } else {
                    input.type = 'password';
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                }
            });
        });

        // 密码强度检测
        const passwordInput = document.getElementById('password');
        const strengthIndicator = document.getElementById('strength-indicator');
        const passwordStrength = document.getElementById('password-strength');

        passwordInput.addEventListener('input', function () {
            const password = this.value;
            let strength = 0;
            let strengthText = '弱';
            let strengthColor = 'bg-red-400';

            // 基础长度检查
            if (password.length >= 8) strength += 25;
            // 包含小写字母
            if (/[a-z]/.test(password)) strength += 25;
            // 包含大写字母
            if (/[A-Z]/.test(password)) strength += 25;
            // 包含数字或特殊字符
            if (/[0-9]/.test(password) || /[^A-Za-z0-9]/.test(password)) strength += 25;

            // 更新强度文本和颜色
            if (strength >= 100) {
                strengthText = '强';
                strengthColor = 'bg-green-500';
            } else if (strength >= 75) {
                strengthText = '较强';
                strengthColor = 'bg-green-400';
            } else if (strength >= 50) {
                strengthText = '中';
                strengthColor = 'bg-yellow-400';
            }

            // 应用样式
            strengthIndicator.style.width = `${strength}%`;
            strengthIndicator.className = `h-full ${strengthColor} rounded-full transition-all duration-300`;
            passwordStrength.textContent = strengthText;
            passwordStrength.className = `font-medium ${strength >= 75 ? 'text-green-600' : strength >= 50 ? 'text-yellow-600' : 'text-red-600'}`;

            // 检查密码匹配
            checkPasswordMatch();
        });

        // 密码匹配检查
        const confirmPasswordInput = document.getElementById('confirmPassword');
        const passwordMatchMessage = document.getElementById('password-match-message');

        confirmPasswordInput.addEventListener('input', checkPasswordMatch);

        function checkPasswordMatch() {
            const password = passwordInput.value;
            const confirmPassword = confirmPasswordInput.value;

            if (confirmPassword.length === 0) {
                passwordMatchMessage.textContent = '';
                return;
            }

            if (password === confirmPassword && password.length > 0) {
                passwordMatchMessage.textContent = '✓ 密码匹配';
                passwordMatchMessage.className = 'mt-1.5 text-xs text-success font-medium';
                confirmPasswordInput.classList.remove('border-red-300');
                confirmPasswordInput.classList.add('border-success');
            } else if (password.length > 0) {
                passwordMatchMessage.textContent = '✗ 密码不匹配';
                passwordMatchMessage.className = 'mt-1.5 text-xs text-red-500';
                confirmPasswordInput.classList.remove('border-success');
                confirmPasswordInput.classList.add('border-red-300');
            }
        }

        // 表单提交处理
        document.querySelector('form').addEventListener('submit', function (e) {
            e.preventDefault();

            // 检查密码是否匹配
            if (passwordInput.value !== confirmPasswordInput.value) {
                confirmPasswordInput.focus();
                return;
            }

            // 模拟注册成功
            const submitButton = this.querySelector('button[type="submit"]');
            const originalText = submitButton.innerHTML;

            // 显示加载状态
            submitButton.disabled = true;
            submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 注册中...';

            // 模拟API请求延迟
            setTimeout(() => {
                alert('注册成功！您将收到一封验证邮件，请查收。');
                window.location.href = 'login.html';
            }, 1500);
        });
    </script>
</body>

</html>